<template>
  <div class="w-full">
    <div ref="canvasRef">HTML2Canvas 渲染</div>
    <img :src="image" />
  </div>
</template>

<script setup lang="ts">
import html2canvas from 'html2canvas';
const canvasRef = ref<HTMLElement>();

const image = ref();

const preview = async () => {
  if (canvasRef.value) {
    const canvasData = await html2canvas(canvasRef.value);
    image.value = canvasData.toDataURL();
  }
};
onMounted(() => {
  preview();
});
</script>

<style lang="scss" scoped></style>
